<template>
  <div>
    <el-input
      placeholder="请输入部门名称"
      clearable
      size="small"
      prefix-icon="el-icon-search"
      style="margin-bottom: 20px"
      v-model="deptName">
    </el-input>

    <el-tree
      :v-loading="loading"
      :data="deptOptions"
      :props="{children: 'children',label: 'deptName'}"
      default-expand-all
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      highlight-current
      @node-click="handleNodeClick"
      ref="tree">
    </el-tree>
  </div>
</template>

<script>
import sysDeptApi from "@/api/system/sysDept";
export default {
  name: "sys-user-left-tree.vue",
  //监听部门名称的过滤的变化
  watch:{
    deptName(value){
      this.$refs.tree.filter(value)
    }
  },
  data(){
    return{
      //加载的遮罩
      loading:false,
      //过滤的部门名称
      deptName:undefined,
      //部门树的数据
      deptOptions:[]
    }
  },
  created() {
    this.getDeptList();
  },
  methods:{
    //查询部门数据
    getDeptList(){
      this.loading=true;
      sysDeptApi.listDept().then(res=>{
        this.deptOptions=res.data;
        this.loading=false
      }).catch(()=>{
        this.loading=false
      })
    },
    //部门树的过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    //树节点的点击事件
    handleNodeClick(data){
      this.$emit("reload",data.deptId)
    }
  }
}
</script>

<style scoped>

</style>
